<template>
  <div class="course-detail" v-loading="loading">
    <!-- 课程头部信息 -->
    <div class="course-header">
      <div class="container">
        <div class="header-content">
          <!-- 左侧：课程基本信息 -->
          <div class="course-basic">
            <div class="breadcrumb">
              <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/courses' }">课程</el-breadcrumb-item>
                <el-breadcrumb-item>{{ course.title }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            
            <h1 class="course-title">{{ course.title }}</h1>
            
            <p class="course-subtitle">{{ course.subtitle }}</p>
            
            <div class="course-meta">
              <div class="meta-item">
                <el-rate
                  v-model="course.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                />
                <span class="rating-count">({{ formatNumber(course.ratingCount) }}人评价)</span>
              </div>
              
              <div class="meta-item">
                <el-icon><User /></el-icon>
                <span>{{ formatNumber(course.enrollCount) }}人学习</span>
              </div>
              
              <div class="meta-item">
                <el-icon><Clock /></el-icon>
                <span>{{ course.duration }}小时</span>
              </div>
              
              <div class="meta-item">
                <el-icon><Document /></el-icon>
                <span>{{ course.lessonCount }}课时</span>
              </div>
            </div>
            
            <div class="instructor-info">
              <img
                :src="course.instructor?.avatar || defaultAvatar"
                :alt="course.instructor?.name"
                class="instructor-avatar"
              />
              <div class="instructor-details">
                <div class="instructor-name">{{ course.instructor?.name }}</div>
                <div class="instructor-title">{{ course.instructor?.title }}</div>
              </div>
            </div>
            
            <div class="course-tags">
              <el-tag
                v-for="tag in course.tags"
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <!-- 右侧：课程封面和操作 -->
          <div class="course-preview">
            <div class="preview-container">
              <img
                :src="course.cover || defaultCover"
                :alt="course.title"
                class="course-cover"
              />
              
              <div class="play-overlay" @click="handlePreview">
                <div class="play-btn">
                  <el-icon size="32"><VideoPlay /></el-icon>
                </div>
              </div>
            </div>
            
            <div class="course-price">
              <div v-if="course.isFree" class="price-free">
                免费
              </div>
              <div v-else class="price-paid">
                <span class="current-price">¥{{ course.price }}</span>
                <span v-if="course.originalPrice" class="original-price">
                  ¥{{ course.originalPrice }}
                </span>
              </div>
            </div>
            
            <div class="course-actions">
              <el-button
                v-if="course.isEnrolled"
                type="success"
                size="large"
                class="action-btn"
                @click="handleContinue"
              >
                继续学习
              </el-button>
              
              <el-button
                v-else
                type="primary"
                size="large"
                class="action-btn"
                @click="handleEnroll"
              >
                {{ course.isFree ? '免费学习' : '立即购买' }}
              </el-button>
              
              <div class="secondary-actions">
                <el-button
                  size="default"
                  plain
                  @click="handleFavorite"
                >
                  <el-icon><Star v-if="course.isFavorite" /><StarFilled v-else /></el-icon>
                  {{ course.isFavorite ? '已收藏' : '收藏' }}
                </el-button>
                
                <el-button
                  size="default"
                  plain
                  @click="handleShare"
                >
                  <el-icon><Share /></el-icon>
                  分享
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 课程内容 -->
    <div class="course-content">
      <div class="container">
        <div class="content-layout">
          <!-- 主要内容 -->
          <div class="main-content">
            <el-tabs v-model="activeTab" class="course-tabs">
              <!-- 课程介绍 -->
              <el-tab-pane label="课程介绍" name="introduction">
                <div class="introduction-content">
                  <div class="section">
                    <h3>课程描述</h3>
                    <div class="description" v-html="course.description"></div>
                  </div>
                  
                  <div class="section">
                    <h3>学习目标</h3>
                    <ul class="objectives">
                      <li v-for="objective in course.objectives" :key="objective">
                        {{ objective }}
                      </li>
                    </ul>
                  </div>
                  
                  <div class="section">
                    <h3>适合人群</h3>
                    <ul class="target-audience">
                      <li v-for="audience in course.targetAudience" :key="audience">
                        {{ audience }}
                      </li>
                    </ul>
                  </div>
                  
                  <div class="section">
                    <h3>课程特色</h3>
                    <div class="features">
                      <div
                        v-for="feature in course.features"
                        :key="feature.title"
                        class="feature-item"
                      >
                        <el-icon class="feature-icon"><component :is="feature.icon" /></el-icon>
                        <div class="feature-content">
                          <h4>{{ feature.title }}</h4>
                          <p>{{ feature.description }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <!-- 课程目录 -->
              <el-tab-pane label="课程目录" name="chapters">
                <div class="chapters-content">
                  <div class="chapters-header">
                    <div class="chapters-stats">
                      <span>共{{ course.chapters?.length || 0 }}章</span>
                      <span>{{ course.lessonCount }}课时</span>
                      <span>{{ course.duration }}小时</span>
                    </div>
                    
                    <el-button
                      size="small"
                      text
                      @click="toggleAllChapters"
                    >
                      {{ allExpanded ? '收起全部' : '展开全部' }}
                    </el-button>
                  </div>
                  
                  <div class="chapters-list">
                    <div
                      v-for="(chapter, chapterIndex) in course.chapters"
                      :key="chapter.id"
                      class="chapter-item"
                    >
                      <div
                        class="chapter-header"
                        @click="toggleChapter(chapterIndex)"
                      >
                        <div class="chapter-info">
                          <el-icon class="expand-icon" :class="{ expanded: chapter.expanded }">
                            <ArrowRight />
                          </el-icon>
                          <span class="chapter-title">第{{ chapterIndex + 1 }}章 {{ chapter.title }}</span>
                        </div>
                        
                        <div class="chapter-meta">
                          <span>{{ chapter.lessons?.length || 0 }}课时</span>
                          <span>{{ chapter.duration }}分钟</span>
                        </div>
                      </div>
                      
                      <div v-show="chapter.expanded" class="lessons-list">
                        <div
                          v-for="(lesson, lessonIndex) in chapter.lessons"
                          :key="lesson.id"
                          class="lesson-item"
                          @click="handleLessonClick(lesson)"
                        >
                          <div class="lesson-info">
                            <el-icon class="lesson-icon">
                              <VideoPlay v-if="lesson.type === 'video'" />
                              <Document v-else-if="lesson.type === 'document'" />
                              <EditPen v-else-if="lesson.type === 'exercise'" />
                              <QuestionFilled v-else-if="lesson.type === 'quiz'" />
                            </el-icon>
                            
                            <span class="lesson-title">{{ lessonIndex + 1 }}. {{ lesson.title }}</span>
                            
                            <el-tag
                              v-if="lesson.isFree"
                              type="success"
                              size="small"
                              effect="plain"
                            >
                              免费
                            </el-tag>
                          </div>
                          
                          <div class="lesson-meta">
                            <span class="lesson-duration">{{ lesson.duration }}分钟</span>
                            
                            <el-icon
                              v-if="lesson.isCompleted"
                              class="completed-icon"
                              color="#67c23a"
                            >
                              <CircleCheck />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <!-- 评价 -->
              <el-tab-pane label="评价" name="reviews">
                <div class="reviews-content">
                  <div class="reviews-summary">
                    <div class="rating-overview">
                      <div class="overall-rating">
                        <div class="rating-score">{{ course.rating }}</div>
                        <el-rate
                          v-model="course.rating"
                          disabled
                          size="large"
                        />
                        <div class="rating-text">综合评分</div>
                      </div>
                      
                      <div class="rating-distribution">
                        <div
                          v-for="(item, index) in ratingDistribution"
                          :key="index"
                          class="rating-bar"
                        >
                          <span class="star-count">{{ 5 - index }}星</span>
                          <div class="progress-bar">
                            <div
                              class="progress-fill"
                              :style="{ width: item.percentage + '%' }"
                            ></div>
                          </div>
                          <span class="count">{{ item.count }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="reviews-list">
                    <div class="reviews-header">
                      <h3>学员评价 ({{ formatNumber(course.ratingCount) }})</h3>
                      
                      <el-select
                        v-model="reviewFilter"
                        placeholder="筛选评价"
                        size="small"
                        style="width: 120px"
                      >
                        <el-option label="全部" value="all" />
                        <el-option label="5星" value="5" />
                        <el-option label="4星" value="4" />
                        <el-option label="3星" value="3" />
                        <el-option label="2星" value="2" />
                        <el-option label="1星" value="1" />
                      </el-select>
                    </div>
                    
                    <div class="review-items">
                      <div
                        v-for="review in filteredReviews"
                        :key="review.id"
                        class="review-item"
                      >
                        <div class="review-header">
                          <img
                            :src="review.user.avatar || defaultAvatar"
                            :alt="review.user.name"
                            class="user-avatar"
                          />
                          
                          <div class="review-meta">
                            <div class="user-name">{{ review.user.name }}</div>
                            <div class="review-info">
                              <el-rate
                                v-model="review.rating"
                                disabled
                                size="small"
                              />
                              <span class="review-date">{{ formatDate(review.createdAt) }}</span>
                            </div>
                          </div>
                        </div>
                        
                        <div class="review-content">
                          {{ review.content }}
                        </div>
                        
                        <div v-if="review.reply" class="review-reply">
                          <div class="reply-header">
                            <span class="reply-label">讲师回复：</span>
                          </div>
                          <div class="reply-content">{{ review.reply.content }}</div>
                        </div>
                      </div>
                    </div>
                    
                    <div v-if="hasMoreReviews" class="load-more">
                      <el-button
                        type="primary"
                        plain
                        @click="loadMoreReviews"
                        :loading="loadingReviews"
                      >
                        加载更多评价
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <!-- 侧边栏 -->
          <div class="sidebar">
            <!-- 相关课程 -->
            <div class="sidebar-section">
              <h3>相关课程</h3>
              <div class="related-courses">
                <div
                  v-for="relatedCourse in relatedCourses"
                  :key="relatedCourse.id"
                  class="related-course-item"
                  @click="$router.push(`/course/${relatedCourse.id}`)"
                >
                  <img
                    :src="relatedCourse.cover || defaultCover"
                    :alt="relatedCourse.title"
                    class="related-course-cover"
                  />
                  
                  <div class="related-course-info">
                    <div class="related-course-title">{{ relatedCourse.title }}</div>
                    <div class="related-course-price">
                      {{ relatedCourse.isFree ? '免费' : `¥${relatedCourse.price}` }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 学习进度 -->
            <div v-if="course.isEnrolled" class="sidebar-section">
              <h3>学习进度</h3>
              <div class="progress-info">
                <el-progress
                  :percentage="course.progress || 0"
                  :stroke-width="8"
                  :show-text="false"
                />
                <div class="progress-text">
                  已完成 {{ course.completedLessons || 0 }}/{{ course.lessonCount }} 课时
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  User,
  Clock,
  Document,
  VideoPlay,
  Star,
  StarFilled,
  Share,
  ArrowRight,
  EditPen,
  QuestionFilled,
  CircleCheck
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getCourseDetail, enrollCourse, favoriteCourse } from '@/api/course'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const course = ref({})
const activeTab = ref('introduction')
const allExpanded = ref(false)
const reviewFilter = ref('all')
const reviews = ref([])
const hasMoreReviews = ref(true)
const loadingReviews = ref(false)
const relatedCourses = ref([])

// 默认图片
const defaultCover = ''
const defaultAvatar = ''

// 计算属性
const ratingDistribution = computed(() => {
  // 模拟评分分布数据
  return [
    { count: 120, percentage: 60 },
    { count: 80, percentage: 40 },
    { count: 30, percentage: 15 },
    { count: 10, percentage: 5 },
    { count: 5, percentage: 2.5 }
  ]
})

const filteredReviews = computed(() => {
  if (reviewFilter.value === 'all') {
    return reviews.value
  }
  return reviews.value.filter(review => review.rating === parseInt(reviewFilter.value))
})

// 方法
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const toggleAllChapters = () => {
  allExpanded.value = !allExpanded.value
  course.value.chapters?.forEach(chapter => {
    chapter.expanded = allExpanded.value
  })
}

const toggleChapter = (index) => {
  if (course.value.chapters && course.value.chapters[index]) {
    course.value.chapters[index].expanded = !course.value.chapters[index].expanded
  }
}

const handlePreview = () => {
  // 处理课程预览
  ElMessage.info('开始预览课程')
}

const handleEnroll = async () => {
  try {
    await enrollCourse(course.value.id)
    course.value.isEnrolled = true
    ElMessage.success('报名成功！')
  } catch (error) {
    ElMessage.error('报名失败，请重试')
  }
}

const handleContinue = () => {
  // 跳转到学习页面
  router.push(`/learn/${course.value.id}`)
}

const handleFavorite = async () => {
  try {
    await favoriteCourse(course.value.id, !course.value.isFavorite)
    course.value.isFavorite = !course.value.isFavorite
    ElMessage.success(course.value.isFavorite ? '收藏成功' : '取消收藏成功')
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  }
}

const handleShare = () => {
  // 处理分享
  if (navigator.share) {
    navigator.share({
      title: course.value.title,
      text: course.value.subtitle,
      url: window.location.href
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(window.location.href)
    ElMessage.success('链接已复制到剪贴板')
  }
}

const handleLessonClick = (lesson) => {
  if (lesson.isFree || course.value.isEnrolled) {
    router.push(`/learn/${course.value.id}/lesson/${lesson.id}`)
  } else {
    ElMessage.warning('请先报名课程')
  }
}

const loadMoreReviews = async () => {
  loadingReviews.value = true
  try {
    // 加载更多评价
    await new Promise(resolve => setTimeout(resolve, 1000))
    hasMoreReviews.value = false
  } catch (error) {
    ElMessage.error('加载失败，请重试')
  } finally {
    loadingReviews.value = false
  }
}

const loadCourseDetail = async () => {
  try {
    loading.value = true
    const response = await getCourseDetail(route.params.id)
    course.value = response.data
    
    // 初始化章节展开状态
    if (course.value.chapters) {
      course.value.chapters.forEach(chapter => {
        chapter.expanded = false
      })
    }
    
    // 加载评价数据
    reviews.value = response.data.reviews || []
    
    // 加载相关课程
    relatedCourses.value = response.data.relatedCourses || []
  } catch (error) {
    ElMessage.error('加载课程详情失败')
    router.push('/courses')
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadCourseDetail()
})
</script>

<style lang="scss" scoped>
.course-detail {
  min-height: 100vh;
  background: var(--bg-color);
}

.course-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  color: white;
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.header-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-xl);
  align-items: start;
}

.course-basic {
  .breadcrumb {
    margin-bottom: var(--spacing-md);
    
    :deep(.el-breadcrumb__inner) {
      color: rgba(255, 255, 255, 0.8);
      
      &.is-link {
        color: white;
        
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
    
    :deep(.el-breadcrumb__separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}

.course-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md) 0;
}

.course-subtitle {
  font-size: var(--font-size-large);
  opacity: 0.9;
  line-height: 1.5;
  margin: 0 0 var(--spacing-lg) 0;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  
  .el-icon {
    font-size: 16px;
  }
}

.rating-count {
  margin-left: var(--spacing-xs);
  opacity: 0.8;
}

.instructor-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.instructor-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.instructor-details {
  .instructor-name {
    font-size: var(--font-size-medium);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
  }
  
  .instructor-title {
    opacity: 0.8;
    font-size: var(--font-size-small);
  }
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.course-preview {
  background: white;
  border-radius: var(--border-radius-large);
  padding: var(--spacing-lg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.preview-container {
  position: relative;
  border-radius: var(--border-radius-base);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.course-cover {
  width: 100%;
  height: 225px;
  object-fit: cover;
  display: block;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    background: rgba(0, 0, 0, 0.5);
    
    .play-btn {
      transform: scale(1.1);
    }
  }
}

.play-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: var(--transition-all);
}

.course-price {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.price-free {
  font-size: 2rem;
  font-weight: 700;
  color: var(--success-color);
}

.price-paid {
  .current-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--danger-color);
  }
  
  .original-price {
    font-size: var(--font-size-base);
    color: var(--text-color-secondary);
    text-decoration: line-through;
    margin-left: var(--spacing-sm);
  }
}

.course-actions {
  .action-btn {
    width: 100%;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    padding: var(--spacing-md) 0;
  }
  
  .secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }
}

.course-content {
  padding: var(--spacing-xl) 0;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
}

.main-content {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
}

.course-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
    background: var(--fill-color-extra-light);
    padding: 0 var(--spacing-lg);
  }
  
  :deep(.el-tabs__content) {
    padding: var(--spacing-lg);
  }
}

.introduction-content {
  .section {
    margin-bottom: var(--spacing-xl);
    
    h3 {
      font-size: var(--font-size-large);
      font-weight: 600;
      margin-bottom: var(--spacing-md);
      color: var(--text-color-primary);
    }
  }
  
  .description {
    line-height: 1.8;
    color: var(--text-color-regular);
  }
  
  .objectives,
  .target-audience {
    list-style: none;
    padding: 0;
    
    li {
      position: relative;
      padding-left: var(--spacing-lg);
      margin-bottom: var(--spacing-sm);
      line-height: 1.6;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
  
  .features {
    display: grid;
    gap: var(--spacing-lg);
  }
  
  .feature-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--fill-color-extra-light);
    border-radius: var(--border-radius-base);
    
    .feature-icon {
      font-size: 24px;
      color: var(--primary-color);
      flex-shrink: 0;
    }
    
    .feature-content {
      h4 {
        margin: 0 0 var(--spacing-xs) 0;
        font-size: var(--font-size-medium);
        font-weight: 600;
      }
      
      p {
        margin: 0;
        color: var(--text-color-regular);
        line-height: 1.5;
      }
    }
  }
}

.chapters-content {
  .chapters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-extra-light);
  }
  
  .chapters-stats {
    display: flex;
    gap: var(--spacing-lg);
    color: var(--text-color-secondary);
    font-size: var(--font-size-small);
  }
}

.chapter-item {
  border: 1px solid var(--border-color-extra-light);
  border-radius: var(--border-radius-base);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.chapter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--fill-color-extra-light);
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    background: var(--fill-color-light);
  }
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.expand-icon {
  transition: transform 0.3s ease;
  
  &.expanded {
    transform: rotate(90deg);
  }
}

.chapter-title {
  font-weight: 600;
  color: var(--text-color-primary);
}

.chapter-meta {
  display: flex;
  gap: var(--spacing-md);
  color: var(--text-color-secondary);
  font-size: var(--font-size-small);
}

.lessons-list {
  background: white;
}

.lesson-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color-extra-light);
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    background: var(--fill-color-extra-light);
  }
}

.lesson-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.lesson-icon {
  color: var(--text-color-secondary);
  font-size: 16px;
}

.lesson-title {
  color: var(--text-color-primary);
}

.lesson-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.lesson-duration {
  color: var(--text-color-secondary);
  font-size: var(--font-size-small);
}

.completed-icon {
  font-size: 16px;
}

.reviews-content {
  .reviews-summary {
    margin-bottom: var(--spacing-xl);
  }
  
  .rating-overview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--fill-color-extra-light);
    border-radius: var(--border-radius-base);
  }
  
  .overall-rating {
    text-align: center;
    
    .rating-score {
      font-size: 3rem;
      font-weight: 700;
      color: var(--warning-color);
      line-height: 1;
      margin-bottom: var(--spacing-sm);
    }
    
    .rating-text {
      color: var(--text-color-secondary);
      font-size: var(--font-size-small);
      margin-top: var(--spacing-sm);
    }
  }
  
  .rating-distribution {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .rating-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    
    .star-count {
      width: 40px;
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
    
    .progress-bar {
      flex: 1;
      height: 8px;
      background: var(--border-color-extra-light);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background: var(--warning-color);
      transition: width 0.3s ease;
    }
    
    .count {
      width: 40px;
      text-align: right;
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
  }
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  
  h3 {
    margin: 0;
    font-size: var(--font-size-large);
    font-weight: 600;
  }
}

.review-item {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color-extra-light);
  
  &:last-child {
    border-bottom: none;
  }
}

.review-header {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.review-meta {
  flex: 1;
  
  .user-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
  }
  
  .review-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  .review-date {
    color: var(--text-color-secondary);
    font-size: var(--font-size-small);
  }
}

.review-content {
  line-height: 1.6;
  color: var(--text-color-regular);
  margin-bottom: var(--spacing-md);
}

.review-reply {
  background: var(--fill-color-extra-light);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-base);
  border-left: 3px solid var(--primary-color);
  
  .reply-header {
    margin-bottom: var(--spacing-xs);
  }
  
  .reply-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: var(--font-size-small);
  }
  
  .reply-content {
    color: var(--text-color-regular);
    line-height: 1.5;
  }
}

.load-more {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.sidebar-section {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  padding: var(--spacing-lg);
  
  h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-medium);
    font-weight: 600;
  }
}

.related-courses {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.related-course-item {
  display: flex;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    transform: translateY(-2px);
  }
}

.related-course-cover {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--border-radius-small);
}

.related-course-info {
  flex: 1;
  
  .related-course-title {
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    @include text-ellipsis-multi(2);
  }
  
  .related-course-price {
    font-size: var(--font-size-small);
    color: var(--danger-color);
    font-weight: 600;
  }
}

.progress-info {
  .progress-text {
    text-align: center;
    margin-top: var(--spacing-sm);
    color: var(--text-color-secondary);
    font-size: var(--font-size-small);
  }
}

// 响应式设计
@include respond-below(lg) {
  .header-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .course-preview {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .rating-overview {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@include respond-below(md) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .course-title {
    font-size: 2rem;
  }
  
  .course-meta {
    gap: var(--spacing-md);
  }
  
  .meta-item {
    font-size: var(--font-size-small);
  }
  
  .course-tabs {
    :deep(.el-tabs__content) {
      padding: var(--spacing-md);
    }
  }
  
  .chapter-header,
  .lesson-item {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .sidebar-section {
    padding: var(--spacing-md);
  }
}
</style>